<%@ page import="com.sunelec.pojo.Users" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="en">
<head>
    <title>电站信息</title>
    <meta name="renderer" content="webkit" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="${pageContext.request.contextPath}/static/css/font-awesome.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/static/css/style.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/static/css/essentialInformation.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/static/laydate/theme/default/laydate.css" rel="stylesheet" />
    <script src=${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/laydate/laydate.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/echarts.js"></script>
</head>
<style>
    .con .date,.month,.year{
        position: relative;
        top: -25px;
    }
</style>
<body>
<div class="top">
    <div class="top-left">
        <div class="kong"></div>
        <div class="logo">
            <img src="${pageContext.request.contextPath}/static/imgs/logo3.png">
        </div>
    </div>
    <div class="top-right">
        <ul class="list">
            <li><a href="${pageContext.request.contextPath}/powerCenter.action?username=${username}">电站中心</a></li>
            <li><a href="checkCenter.jsp">运维中心</a></li>
            <li><a href="${pageContext.request.contextPath}/InReportCenter">报表中心</a></li>
            <li><a href="${pageContext.request.contextPath}/centralizedControl">展示中心</a></li>
            <% if(session.getAttribute("users")!=null){
                Users users = (Users)session.getAttribute("users");
            %>
            <% if(users.getType()==1){%>
            <li><a href="${pageContext.request.contextPath}/InidManage">账号管理</a></li>
            <% }%>
            <% } %>
            <li><a href="${pageContext.request.contextPath}/checkOut.action" ><span class="fa fa-user"></span></a></li>
        </ul>
    </div>
</div>
<div class="main">
    <div class="center">
        <div class="left">
            <div class="topTitle"><span>电站信息</span></div>
            <div class="content">
                <div class="img">
                    <img src="${pageContext.request.contextPath}/static/imgs/information.png">
                </div>
                <div class="detail">
                    <div class="box">
                        <span class="boxHead">电站地址</span>
                        <span class="boxBody">${powerInfo.powerLocal}</span>
                    </div>
                    <div class="box">
                        <span class="boxHead">装机容量</span>
                        <span class="boxBody">${powerInfo.installCapacity}kwh</span>
                    </div>
                    <%--<div class="box">
                        <span class="boxHead">并网类型</span>
                        <span class="boxBody">${powerInfo.}</span>
                    </div>--%>
                    <div class="box">
                        <span class="boxHead">电站类型</span>
                        <span class="boxBody">${powerInfo.poweType}</span>
                    </div>
                    <div class="box">
                        <span class="boxHead">联系电话</span>
                        <span class="boxBody">${user.phone}</span>
                    </div>
                    <div class="box">
                        <a href="${pageContext.request.contextPath}/showDeviceInfo?powerId=${powerInfo.powerId}">
                            <span class="boxHead">电站设备信息</span>
                            <span class="boxBody"><i class="fa fa-angle-right"></i></span>
                        </a>
                    </div>
                </div>
                <div class="weather">
                    <div class="weaTitle">
                        <button class="btn"><i class="fa fa-refresh"></i></button>
                        <span class="text"><span>当地天气</span></span>
                    </div>
                    <div class="place">
                        <span><i class="fa fa-map-marker"></i><span class="placeData">襄阳</span></span>
                    </div>
                    <div class="weaData">
                        <span><i class="fa fa-cloud"></i><span class="data">18℃ 阴天</span></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="rblock1">
                <div class="topTitle"><span>实时</span></div>
                <div class="content">
                    <div class="box1">
                        <div class="icon"><i class="fa fa-sun-o"></i></div>
                        <div class="aTable">
                            <table style="border-collapse:separate; border-spacing:0px 8px;">
                                <tr>
                                    <td>当前功率</td>
                                    <td>日发电量</td>
                                    <td>月发电量</td>
                                    <td>年发电量</td>
                                    <td>总发电量</td>
                                    <td>收益</td>
                                </tr>
                                <tr>
                                    <td><span>${powerList.current_power}Kwh</span></td>
                                    <td>${powerList.daily_electricity}Kwh</td>
                                    <td>${powerList.month_elec}Kwh</td>
                                    <td>${powerList.year_elec}Kwh</td>
                                    <td>${powerList.all_elec}Kwh</td>
                                    <td>${CNY}CNY</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="box2">
                        <div class="block" id="tab">
                            <div class="blockHead">
                                <ul class="tabul">
                                    <li class="active"><span>日</span></li>
                                    <li><span>月</span></li>
                                    <li><span>年</span></li>
                                </ul>
                            </div>
                            <div class="con">
                                <input type="text" placeholder="选择具体日期" class="test1">
                                <div class="chart" id="chart1">
                                    <script type="text/javascript">
                                        var myChart=echarts.init(document.getElementById('chart1'));
                                        option = {
                                            title:{
                                                show:true,
                                                text:'发电功率',
                                                left:'center',
                                                textStyle:{
                                                    color:'black',
                                                    fontSize:12,
                                                }
                                            },
                                            tooltip:{
                                                trigger: 'axis',
                                            },
                                            toolbox: {
                                                feature: {
                                                    dataZoom: {
                                                        yAxisIndex: 'none'
                                                    },
                                                    restore: {},
                                                    saveAsImage: {},
                                                },
                                                right:'5px',
                                                top:'5px'
                                            },
                                            xAxis: {
                                                type: 'category',
                                                boundaryGap: false,
                                                data: ['00:00', '3:00', '6:00', '9:00', '12:00', '15:00', '18:00','21:00'],
                                                axisLine: {
                                                    lineStyle: {
                                                        type: 'solid',
                                                        color:'black',
                                                    }
                                                },
                                                axisLabel: {
                                                    textStyle: {
                                                        color: 'black',
                                                        fontSize:12
                                                    }
                                                }
                                            },
                                            yAxis: {
                                                type: 'value',
                                                axisLine: {
                                                    lineStyle: {
                                                        type: 'solid',
                                                        color:'black'
                                                    }
                                                },
                                                axisLabel: {
                                                    textStyle: {
                                                        color: 'black',
                                                        fontSize:11

                                                    }
                                                },
                                                axisTick: {
                                                    show: false
                                                }
                                            },
                                            series: [{
                                                name:'发电功率',
                                                data: ${power_trendArray_day},
                                                type: 'line',
                                                smooth:true,
                                                symbol: 'none',
                                                sampling: 'average',
                                                itemStyle: {
                                                    normal: {
                                                        color: 'rgb(255,152,1)'
                                                    }
                                                },
                                                areaStyle: {
                                                    normal: {
                                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                            offset: 0,
                                                            color: 'rgba(255,255,255,0)'
                                                        }, {
                                                            offset: 1,
                                                            color: 'rgba(255,255,255,0)'
                                                        }])
                                                    }
                                                }
                                            }],
                                        };
                                        myChart.setOption(option);
                                    </script>
                                </div>
                                <div class="chart" id="chart4" >
                                    <script type="text/javascript">
                                        var myChart=echarts.init(document.getElementById('chart4'));
                                        option = {
                                            title:{
                                                show:true,
                                                text:'当日发电量',
                                                left:'center',
                                                borderColor:'gray',
                                                textStyle:{
                                                    fontSize:12,
                                                    color:'black',
                                                }
                                            },
                                            toolbox:{
                                                show:true,
                                                feature:{
                                                    restore:{
                                                        show:true
                                                    },
                                                    saveAsImage:{
                                                        show:true
                                                    },
                                                    magicType:{
                                                        type:['line','bar']
                                                    }
                                                },
                                            },
                                            tooltip:{
                                                trigger:'axis'
                                            },
                                            xAxis:{
                                                data: ['00:00', '3:00', '6:00', '9:00', '12:00', '15:00', '18:00','21:00'],
                                            },
                                            yAxis:{

                                            },
                                            series:[{
                                                name:'发电量',
                                                type:'bar',
                                                data: ${power_elecArray_day},
                                                barWidth : 20,
                                                itemStyle:{
                                                    normal:{
                                                        color: 'rgb(255,152,1)'
                                                    }
                                                }
                                            }]
                                        };
                                        myChart.setOption(option);
                                    </script>
                                </div>
                            </div>
                            <div class="con" style="display: none;">
                                <input type="text" placeholder="选择具体月份" class="test2">
                                <div class="chart2" id="chart2">
                                    <script type="text/javascript">
                                        var myChart=echarts.init(document.getElementById('chart2'));
                                        option = {
                                            title:{
                                                show:true,
                                                text:'发电功率',
                                                left:'center',
                                                textStyle:{
                                                    color:'black',
                                                    fontSize:12,
                                                }
                                            },
                                            tooltip:{
                                                trigger: 'axis',
                                            },
                                            toolbox: {
                                                feature: {
                                                    dataZoom: {
                                                        yAxisIndex: 'none'
                                                    },
                                                    restore: {},
                                                    saveAsImage: {},
                                                },
                                                right:'5px',
                                                top:'5px'
                                            },
                                            xAxis: {
                                                type: 'category',
                                                boundaryGap: false,
                                                data: ['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
                                                axisLine: {
                                                    lineStyle: {
                                                        type: 'solid',
                                                        color:'black',
                                                    }
                                                },
                                                axisLabel: {
                                                    textStyle: {
                                                        color: 'black',
                                                        fontSize:12
                                                    }
                                                }
                                            },
                                            yAxis: {
                                                type: 'value',
                                                axisLine: {
                                                    lineStyle: {
                                                        type: 'solid',
                                                        color:'black'
                                                    }
                                                },
                                                axisLabel: {
                                                    textStyle: {
                                                        color: 'black',
                                                        fontSize:11

                                                    }
                                                },
                                                axisTick: {
                                                    show: false
                                                }
                                            },
                                            series: [{
                                                name:'发电功率',
                                                data: ${power_trendArray_mon},
                                                type: 'line',
                                                smooth:true,
                                                symbol: 'none',
                                                sampling: 'average',
                                                itemStyle: {
                                                    normal: {
                                                        color: 'rgb(255,152,1)'
                                                    }
                                                },
                                                areaStyle: {
                                                    normal: {
                                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                            offset: 0,
                                                            color: 'rgba(255,255,255,0)'
                                                        }, {
                                                            offset: 1,
                                                            color: 'rgba(255,255,255,0)'
                                                        }])
                                                    }
                                                }
                                            }],
                                        };
                                        myChart.setOption(option);
                                    </script>
                                </div>
                                <div class="chart3" id="chart5">
                                    <script type="text/javascript">
                                        var myChart=echarts.init(document.getElementById('chart5'));
                                        option = {
                                            title:{
                                                show:true,
                                                text:'当月发电量',
                                                left:'center',
                                                borderColor:'gray',
                                                textStyle:{
                                                    fontSize:12,
                                                    color:'black',
                                                }
                                            },
                                            toolbox:{
                                                show:true,
                                                feature:{
                                                    restore:{
                                                        show:true
                                                    },
                                                    saveAsImage:{
                                                        show:true
                                                    },
                                                    magicType:{
                                                        type:['line','bar']
                                                    }
                                                },
                                                right:'5px',
                                                top:'5px'
                                            },
                                            tooltip:{
                                                trigger:'axis'
                                            },
                                            xAxis:{
                                                data: ['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
                                            },
                                            yAxis:{

                                            },
                                            series:[{
                                                name:'发电量',
                                                type:'bar',
                                                data: ${power_elecArray_mon},
                                                barWidth : 10,
                                                itemStyle:{
                                                    normal:{
                                                        color: 'rgb(255,152,1)'
                                                    }
                                                }
                                            }]
                                        };
                                        myChart.setOption(option);
                                    </script>
                                </div>
                            </div>
                            <div class="con" style="display: none">
                                <input type="text" placeholder="选择具体年份" class="test3">
                                <div class="chart2" id="chart3">
                                    <script type="text/javascript">
                                        var myChart=echarts.init(document.getElementById('chart3'));
                                        option = {
                                            title:{
                                                show:true,
                                                text:'发电功率',
                                                left:'center',
                                                textStyle:{
                                                    color:'black',
                                                    fontSize:12,
                                                }
                                            },
                                            toolbox: {
                                                feature: {
                                                    dataZoom: {
                                                        yAxisIndex: 'none'
                                                    },
                                                    restore: {},
                                                    saveAsImage: {},
                                                },
                                                right:'5px',
                                                top:'5px'
                                            },
                                            tooltip:{
                                                trigger: 'axis',
                                            },
                                            xAxis: {
                                                type: 'category',
                                                boundaryGap: false,
                                                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
                                                axisLine: {
                                                    lineStyle: {
                                                        type: 'solid',
                                                        color:'black',
                                                    }
                                                },
                                                axisLabel: {
                                                    textStyle: {
                                                        color: 'black',
                                                        fontSize:12
                                                    }
                                                }
                                            },
                                            yAxis: {
                                                type: 'value',
                                                axisLine: {
                                                    lineStyle: {
                                                        type: 'solid',
                                                        color:'black'
                                                    }
                                                },
                                                axisLabel: {
                                                    textStyle: {
                                                        color: 'black',
                                                        fontSize:11

                                                    }
                                                },
                                                axisTick: {
                                                    show: false
                                                }
                                            },
                                            series: [{
                                                name:'发电功率',
                                                data: ${power_elecArray_year},
                                                type: 'line',
                                                smooth:true,
                                                symbol: 'none',
                                                sampling: 'average',
                                                itemStyle: {
                                                    normal: {
                                                        color: 'rgb(255,152,1)'
                                                    }
                                                },
                                                areaStyle: {
                                                    normal: {
                                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                            offset: 0,
                                                            color: 'rgba(255,255,255,0)'
                                                        }, {
                                                            offset: 1,
                                                            color: 'rgba(255,255,255,0)'
                                                        }])
                                                    }
                                                }
                                            }],
                                        };
                                        myChart.setOption(option);
                                    </script>
                                </div>
                                <div class="chart3" id="chart6" >
                                    <script type="text/javascript">
                                        var myChart=echarts.init(document.getElementById('chart6'));
                                        option = {
                                            title:{
                                                show:true,
                                                text:'当年发电量',
                                                left:'center',
                                                borderColor:'gray',
                                                textStyle:{
                                                    fontSize:12,
                                                    color:'black',
                                                }
                                            },
                                            toolbox:{
                                                show:true,
                                                feature:{
                                                    restore:{
                                                        show:true
                                                    },
                                                    saveAsImage:{
                                                        show:true
                                                    },
                                                    magicType:{
                                                        type:['line','bar']
                                                    }
                                                }
                                            },
                                            tooltip:{
                                                trigger:'axis'
                                            },
                                            xAxis:{
                                                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
                                            },
                                            yAxis:{

                                            },
                                            series:[{
                                                name:'发电量',
                                                type:'bar',
                                                data: ${power_elecArray_year},
                                                barWidth : 20,
                                                itemStyle:{
                                                    normal:{
                                                        color: 'rgb(255,152,1)'
                                                    }
                                                }
                                            }]
                                        };
                                        myChart.setOption(option);
                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    window.onload = function () {
//        tab选项卡
        var tab=document.getElementById('tab');
        var lis=tab.getElementsByTagName('li');
        var con=tab.getElementsByClassName('con');
        for(var i=0;i<lis.length;i++){
            lis[i].xuhao=i;
            lis[i].onclick=function () {
                for(var j=0;j<con.length;j++){
                    con[j].style.display='none';
                    lis[j].classList.remove('active')
                }
                con[this.xuhao].style.display='block';
                lis[this.xuhao].setAttribute('class','active')

            }
        }

        var tab2=document.getElementById('tab2');
        var lis2=tab2.getElementsByTagName('li');
        var con2=tab2.getElementsByClassName('con');
        for(var i=0;i<lis.length;i++){
            lis2[i].xuhao=i;
            lis2[i].onclick=function () {
                for(var j=0;j<con.length;j++){
                    con2[j].style.display='none';
                    lis2[j].classList.remove('active')
                }
                con2[this.xuhao].style.display='block';
                lis2[this.xuhao].setAttribute('class','active')

            }
        }
    }
</script>
<script>
    //执行一个laydate实例
    laydate.render({
        elem: '.test1', //指定元素
    });
    laydate.render({
        elem: '.test2', //指定元素
        type:'month'
    });
    laydate.render({
        elem: '.test3', //指定元素
        type:'year'
    });
</script>
</body>
</html>